<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="searchSubjectList()"
          type="primary"
          size="small"
          >查询结果</el-button
        >
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="编号：">
            <el-input
              style="width: 175px"
              clearable
              v-model="listQuery.id"
              placeholder="请输入编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户昵称：">
            <el-input
              style="width: 175px"
              clearable
              v-model="listQuery.nickName"
              placeholder="请输入用户昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="审核状态：">
            <el-select v-model="listQuery.status" clearable>
              <el-option :value="0" label="待审核"></el-option>
              <el-option :value="1" label="已通过"></el-option>
              <el-option :value="2" label="已拒绝"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
              v-model="listQuery.dtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        v-if="storeId > 0"
        class="btn-add"
        @click="addSubject()"
        size="mini"
        >添加</el-button
      >
    </el-card>
    <div class="table-container">
      <el-table
        ref="subjectTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->

        <el-table-column
          label="编号"
          align="center"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
          label="用户昵称"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.nickName }}</template>
        </el-table-column>
        <el-table-column
          label="手机号"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column
          label="提现金额"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.money }}</template>
        </el-table-column>
        <el-table-column
          label="开户行"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.bankName }}</template>
        </el-table-column>
        <el-table-column
          label="开户账号"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{ scope.row.bankCode }}</template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          align="center"
          width="200"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            scope.row.status | formatStatus
          }}</template>
        </el-table-column>
        <!-- <el-table-column label="转账状态" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{scope.row.bankCode}}</template>
        </el-table-column> -->
        <el-table-column
          label="提现时间"
          align="center"
          width="300"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            scope.row.createTime | formatCreateTime
          }}</template>
        </el-table-column>
        <!-- <el-table-column label="操作" align="center" fixed="right" width="170"> -->
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpdate(scope.row, 1)"
              :disabled="scope.row.status == 1 || scope.row.status == 2"
              >通过</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleUpdate(scope.row, 2)"
              :disabled="scope.row.status == 2 || scope.row.status == 1"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container"></div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 15, 50]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import { txList, txEdit } from "@/api/finance/api";

export default {
  name: "subjectList",
  data() {
    return {
      operates: [
        {
          label: "显示品牌",
          value: "showSubject",
        },
        {
          label: "隐藏品牌",
          value: "hideSubject",
        },
      ],
      operateType: null,
      listQuery: {
        keyword: null,
        // type: 4,
        pageNum: 1,
        pageSize: 10,
      },
      list: null,
      total: null,
      listLoading: true,
      multipleSelection: [],
      storeId: null,
    };
  },
  created() {
    this.getList();
    this.storeId = this.$store.state.user.storeId;
  },
  filters: {
    formatCreateTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },

    formatStatus(value) {
      if (value === 1) {
        return "已通过";
      } else if (value === 0) {
        return "待审核";
      } else if (value === 2) {
        return "已拒绝";
      }
    },
  },
  methods: {
    getList() {
      this.listLoading = true;
      txList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },
    handleRecomChange(index, row) {
      let params = new URLSearchParams();
      params.append("ids", row.id);
      params.append("recommendStatus", row.recommendStatus);
      updateRecommendStatus(params).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleShowChange(index, row) {
      let params = new URLSearchParams();
      params.append("ids", row.id);
      params.append("showStatus", row.showStatus);
      updateShowStatus(params).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    handleSelectionChange(val) {
      this.multipleSeleconsole.log(row);
      ction = val;
    },
    handleUpdate(row, status) {
      this.$confirm("是否要确认该操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (row.status != status) {
          txEdit(row.id, {
            status,
            id: row.id,
          }).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          });
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除该品牌", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteSubject(row.id).then((response) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
          this.getList();
        });
      });
    },
    getProductList(index, row) {
      console.log(index, row);
    },
    getProductCommentList(index, row) {
      console.log(index, row);
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    searchSubjectList() {
      this.listQuery.pageNum = 1;
      if (this.listQuery.nickName == "") {
        delete this.listQuery.nickName;
      }
      if (this.listQuery.dtime) {
        this.listQuery.startTime = formatDate(
          this.listQuery.dtime[0],
          "yyyy-MM-dd hh:mm:ss"
        );
        this.listQuery.endTime = formatDate(
          this.listQuery.dtime[1],
          "yyyy-MM-dd hh:mm:ss"
        );
        delete this.listQuery.dtime;
      }
      // if(parseInt(this.listQuery.id).toString() == "NaN"){
      //   this.listQuery.id = 0;
      //   this.getList();
      // }else{
      //   this.listQuery.id = parseInt(this.listQuery.id);

      // }
      this.getList();
    },
    handleBatchOperate() {
      console.log(this.multipleSelection);
      if (this.multipleSelection < 1) {
        this.$message({
          message: "请选择一条记录",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      let showStatus = 0;
      if (this.operateType === "showSubject") {
        showStatus = 1;
      } else if (this.operateType === "hideSubject") {
        showStatus = 0;
      } else {
        this.$message({
          message: "请选择批量操作类型",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      let ids = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      let data = new URLSearchParams();
      data.append("ids", ids);
      data.append("showStatus", showStatus);
      updateShowStatus(data).then((response) => {
        this.getList();
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    addSubject() {
      this.$router.push({ path: "/cms/addSubject" });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>


